<template>
	<view class="pages">
		
		 
		<view class="form">
			<view class="inp">
				<view class="left">
					<text>姓名：</text>
				</view>
				<view class="right">
					 <input type="text" class="input" placeholder="请输入姓名" v-model="form.name"  />
				</view>
			</view>
			<view class="inp">
				<view class="left">
					 
					<text>手机号码：</text>
				</view>
				<view class="right">
					 <input type="tel" class="input" placeholder="请输入手机号" v-model="form.mobile"  />
				</view>
			</view>
			<view class="inp">
				<view class="left">
					<text>所在地区：</text>
				</view>
				<view class="right"  style="flex: 1;justify-content: flex-end;" @click="chooseAddress">
					<text v-if="form.areaAddress">{{form.areaAddress}}</text>
					<text v-else style="color: #999;">请选择所在地区</text>
					<u-icon slot="right" name="map-fill" color="#277EEF" size='20' ></u-icon>
				</view>
			</view>
			<view class="inp">
				<view class="left">
					<text>详细地址：</text>
				</view>
				<view class="right"  style="flex: 1;">
					 <input style="width: 100%;" type="text" class="input" placeholder="请输入详细地址(请具体到门牌号)" v-model="form.detailAddress"  />	 
				</view>
			</view>
			<view class="inp">
				<view class="left">
					<text>住宅面积（m²）：</text>
				</view>
				<view class="right">
					 <input type="digit" class="input" placeholder="请输入住宅面积（m²）" v-model="form.area"  />
				</view>
			</view>
			
			<view class="inp">
				<view class="left">
					<text>房屋户型：</text>
				</view>
				<view class="right">
					<picker @change="(e)=>bindPickerChange(e,'houseType',dictCode.house_type)"
					:range="dictCode.house_type" style="width: 100%;" range-key="label">
						 <view class="flex">
							 <view>{{ formatDict(dictCode.house_type,form.houseType) || '请选择'}}</view>
							 <u-icon slot="right" name="arrow-right"></u-icon>
						 </view>
					</picker>
				</view>
			</view>
			
			<view class="inp" style="border: none;">
				<view class="left" @click="chose">
					<u-icon name="checkmark-circle" size="16" v-if="!form.defaultStatus"></u-icon>
					<u-icon name="checkmark-circle" color="#2979ff" size="16" v-else></u-icon>
					<text style="margin-left: 5rpx;">设为默认</text>
				</view>
				
			</view>
		</view>
		 
		 <view class="woodsbtn" @click="del" v-if="id" style="width: 90%;background-color: #fff;border:1rpx solid #277EEF;color:#277EEF;margin-top: 40rpx;">
		 	   删除 
		 </view>
		 <view class="woodsbtn" @click="up" style="width: 90%;margin: 20rpx auto;">
		 	保存并使用
		 </view>
		 
	</view>
</template>

<script>
 	import {addressupdateAPI,addresscreateAPI,addressInfoAPI,addressdeleteAPI,getAddressgetAddressjwAPI} from "@/api/user.js"
	import {getAreaTreeAPI} from "@/api/api.js"
	import {getcityAPI} from "@/api/home.js"
	import dict from "@/mixins/dict.js"
 	export default {
		mixins:[dict],
		data() {
			return {
				form:{
					defaultStatus:0,
					houseType:"",
					longitude:"",
					latitude:"",
					detailAddress:"",
					areaAddress:""
				},
				id:'' ,
				dictCode:{
				   house_type:[]
				}, 

				id: 0, // 地址 id
				  
				 
			}
		},
		
		onLoad(option) {
			if (option.id) {
				uni.setNavigationBarTitle({
					title:  '修改地址' 
				})
				this.id=option.id
				this.getdata()
			}
		},
		methods: {
			chooseAddress(){
				var _this=this
				uni.chooseLocation({
					success(res) {
						console.log(res)
						let address = res.name;
						_this.form.latitude = res.latitude; //纬度
						_this.form.longitude = res.longitude; //经度
						_this.form.areaAddress = res.address 
						_this.form.detailAddress = res.name 
						_this.getcity(res)
					}
				})
			},
			getcity({longitude,latitude}){
				uni.showLoading({
					title:'获取地区信息中'
				})
				getcityAPI({longitude,latitude}).then(rest=> {
					let res = rest
					uni.hideLoading()
					this.form.city=res.city
					this.form.areaId=res.districtId
					this.form.cityCode=res.cityId
				})
			},
			bindPickerChange(e,key,list){
				var index = e.detail.value
				this.form[key]= list[index].value
			
			},
			chose(){
				this.form.defaultStatus=this.form.defaultStatus==0 ? 1 : 0
			},
			getdata(){
				addressInfoAPI({id:this.id}).then(res=>{
					 
					this.$set(this, 'form', res);
					   
				})
			},
			del(){
				addressdeleteAPI({id:this.id}).then(res=>{
					uni.showToast({
						title:"删除成功",
						icon:"none"
					})
					setTimeout(()=>{
						uni.navigateBack({
							delta:1
						}) 
					},1000) 
				})
			},
			 
			 
			up(){
				const value = this.form;
				if (!value.name) {
					return uni.showToast({
						title:"请填写姓名",
						icon:"none"
					})
					 
				}
				if (!value.mobile) {
					return uni.showToast({
						title:"请填写联系电话",
						icon:"none"
					})
					 
				}
				if (!/^1(3|4|5|7|8|9|6)\d{9}$/i.test(value.mobile)) {
					return uni.showToast({
						title:"请填写正确的联系电话",
						icon:"none"
					})
				 
				}
				if (!value.areaAddress) {
					return uni.showToast({
						title: '请选择地区地址',
						icon:"none"
					});
				 
				} 
				if (!value.detailAddress) {
					return uni.showToast({
						title: '请填写详细地址',
						icon:"none"
					});
				 
				}
				this.submitAdress(value)
				 
			},
			submitAdress(value){
				// 提交保存
				uni.showLoading({
					title: '保存中',
					mask: true
				})
				 
				var _this=this
				if(_this.id){
					// value.id=this.form.id
					addressupdateAPI(value).then(res=>{
						uni.showToast({
							title:"编辑成功"
						})
						setTimeout(()=>{
							uni.navigateBack({
								delta:1
							}) 
						},1000)
						
					})
					return
				}
				addresscreateAPI(value).then(res=>{
					uni.showToast({
						title:"添加成功"
					})
					setTimeout(()=>{
						uni.navigateBack({
							delta:1
						}) 
					},1000)
					
				})
			} 
			 
		}
	}
</script>

<style lang="scss" scoped>
.pages{
	padding: 30rpx;
	background-color: #F7F8FA;
	min-height:100vh;
}
.check{
	width: 35rpx;
	height: 35rpx;
	border-radius: 50%;
	border: 1px solid #666;
	margin-right: 10rpx;
}
.checked{
	width: 35rpx;
	height: 35rpx;
	border-radius: 50%;
	border: 1px solid $uni-color-primary;
	margin-right: 10rpx;
	background-color: $uni-color-primary;
}
.avatar{
	width:80rpx;
	height: 80rpx;
	border-radius: 50%;
	background-color: #efefef;
 
	padding: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	image{
		width: 80rpx;
		height: 80rpx;
		border-radius: 50%;
	}
	text{
		color: #666;
		font-size:18rpx;
	}
}
.form{
	background-color: #fff;
	border-radius: 20rpx;
	padding: 20rpx;
	margin-top: 20rpx;
	.inp{
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 25rpx 0;
		border-bottom: 1px solid #F4F6FA;
		.left{
			display: flex;
			align-items: center;
			image{
				width: 45rpx;
			}
			>text{
				color: #333333;
				font-weight: bold;
				font-size: 28rpx;
			}
		}
		
		input{
			text-align: right;
		}
		.right{
			display: flex;
			align-items: center;
			>image{
				width: 40rpx;
			}
		}
		.datetime{
			display: flex;
			align-items: center;
			text{
				color: #7C8191;
			}
			image{
				width: 35rpx;
			}
		}
		.textarea{
			width: 100%;
			box-sizing: border-box;
			background-color: #F4F6FA;
			border-radius: 20rpx;
			padding: 20rpx;
			margin-top: 40rpx;
			textarea{
				width: 100%;
				height: 40rpx;
			}
		}
	}
}
 
</style>
